var hackathon = {

	init : function () {

	}

};


var map = {
	var 
		mapModel = new (Backbone.Collection.extend({
			url : "http://119.147.8.121:8081/query?",
			getMarker : function (pos_x,pos_y,zoom) {
				this.fetch({
					url:this.url+"pos_x="+pos_x+"pos_y="+pos_y,
					success : function(model,data){
						console.log(model,data);
					}
				}) 
			},
			addMarker : function (opts) {
				var url = (function(opts){
					var _str = "http://119.147.8.121:8081/create";

						return _str;
				})(opts);

				this.save({
					url : url,
					success : function (model,data) {
						console.log(model,data);
					}
				})
			}
		})),

		mapView = (function(){
			var view = Backbone.View.extend({
				config : null,
				map : null,
				el : $("map_canvas"),
				

				initialize : function () {
					//get data about json [{title:""}] 
					var 
						that = this;

					this.infowindow = new google.maps.InfoWindow();

					this.model.bind("reset",this.setConfig,this);
					this.model.bind("add",this.addMarker,this);

					navigator.geolocation.getCurrentPosition(function(position){
						that.model.getMarker({pos_x:position.coords.longitude,pos_y:position.coords.latitude});
					});
					
				},

				setConfig : function (model,data) {

					this.config = {};
					this.render();
				},

				render : function (config) {
					//make maps
					var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
					  
					  config = {
					    zoom: 5,
					    center: myLatLng,
					    mapTypeId: google.maps.MapTypeId.TERRAIN
					  };


					  // this.map = new google.maps.Map(this.$el,
					  //     config);
				},

				postMarker : function () {

				},

				addMarker : function () {
					var marker =(function () {
							return ;
						})();



					this.setEvent(marker,"click",this.showDetail);
					this.setEvent(marker,"touch",this.showDetail);
				},

				setEvent : function (marker,type,fun) {
					var addEvent = google.maps.event.addListener;

					addEvent(marker, type ,fun);
				},

				showDetail : function (event) {
					//show infowindow
					var contentString,
						infowindow = this.infowindow;

					infowindow.setContent(contentString);
					infowindow.setPosition(event.latLng);
					infowindow.open(this.map);
					console.log("show infowindow");
				},

				addInfoWindow : function () {
					var map;
					var infoWindow ;

					function initialize() {
					  var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
					  var mapOptions = {
					    zoom: 5,
					    center: myLatLng,
					    mapTypeId: google.maps.MapTypeId.TERRAIN
					  };

					  var bermudaTriangle;

					  map = new google.maps.Map(document.getElementById("map_canvas"),
					      mapOptions);

					  var triangleCoords = [
					    new google.maps.LatLng(25.774252, -80.190262),
					    new google.maps.LatLng(18.466465, -66.118292),
					    new google.maps.LatLng(32.321384, -64.75737)
					  ];

					  bermudaTriangle = new google.maps.Polygon({
					    paths: triangleCoords,
					    strokeColor: "#FF0000",
					    strokeOpacity: 0.8,
					    strokeWeight: 3,
					    fillColor: "#FF0000",
					    fillOpacity: 0.35
					  });

					  bermudaTriangle.setMap(map);

					  // Add a listener for the click event
					  google.maps.event.addListener(bermudaTriangle, 'click', showArrays);

					  infowindow = new google.maps.InfoWindow();
					}

					function showArrays(event) {

					  // Since this Polygon only has one path, we can call getPath()
					  // to return the MVCArray of LatLngs
					  var vertices = this.getPath();

					  var contentString = "<b>Bermuda Triangle Polygon</b><br />";
					  contentString += "Clicked Location: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />";

					  // Iterate over the vertices.
					  for (var i =0; i < vertices.length; i++) {
					    var xy = vertices.getAt(i);
					    contentString += "<br />" + "Coordinate: " + i + "<br />" + xy.lat() +"," + xy.lng();
					  }

					  // Replace our Info Window's content and position
					  infowindow.setContent(contentString);
					  infowindow.setPosition(event.latLng);

					  infowindow.open(map);
					}
				}

			});

			return (function(){
				return new view({model:mapModel});
			})
		})();

}